<!--表单组件-->
<template>
    <div class="base-forms">
        <el-form ref="formRef" :model="formsData" :rules="formsRules" :inline="formsInline" :label-width="labelWidth" class="form-inline">
            <template v-if="formFile.length > 0" v-for="(item,i) in formFile">
                <el-form-item v-show="item.show" :label="item.title" :prop="item.prop" :style="{'width':item.type === 'textarea' ? '70%' : ''}">
                    <!--输入框-->
                    <el-input
                            v-if="item.type === 'input'"
                            v-model="formsData[item.prop]"
                            :disabled="item.disabled"
                            clearable
                            :placeholder="item.prompt"/>
                    <!--单选框-->
                    <el-radio-group
                            style="width: 250px;"
                            v-if="item.type === 'radio'"
                            v-model="formsData[item.prop]"
                            :disabled="item.disabled" >
                        <el-radio v-for="(item1) in item.children" :label="item1.value">{{item1.label}}</el-radio>
                    </el-radio-group>
                    <!--选择框-->
                    <el-select
                            v-if="item.type === 'select'"
                            v-model="formsData[item.prop]"
                            :multiple="item.multiple"
                            @change="item.formChange"
                            :disabled="item.disabled"
                            clearable filterable
                            :placeholder="item.prompt">
                        <el-option v-for="(item1) in item.children" :label="item1.label" :value="item1.value" />
                    </el-select>
                    <!--时间选择框-->
                    <el-time-picker
                            style="width: 250px;padding: 0px;"
                            v-if="item.type === 'timePicker'"
                            v-model="formsData[item.prop]"
                            :disabled="item.disabled"
                            :is-range="item.isRange"
                            :value-format="item.valueFormat"
                            :format="item.valueFormat"
                            clearable
                            :placeholder="item.prompt"
                            range-separator="至"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                    />
                    <!--日期选择框-->
                    <el-date-picker
                            style="width: 250px;padding: 0px;"
                            v-if="item.type === 'datePicker'"
                            v-model="formsData[item.prop]"
                            :type="item.dateType"
                            :value-format="item.valueFormat"
                            :format="item.valueFormat"
                            :placeholder="item.prompt"
                            range-separator="至"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                    />
                    <!--文本域-->
                    <el-input
                            v-if="item.type === 'textarea'"
                            v-model="formsData[item.prop]"
                            :disabled="item.disabled"
                            :placeholder="item.prompt"
                            :rows="item.rows"
                            type="textarea"
                    />
                    <!--树形选择器-->
                    <el-tree-select
                            style="width: 250px"
                            v-if="item.type === 'treeSelect'"
                            v-model="formsData[item.prop]"
                            filterable
                            :disabled="item.disabled"
                            :placeholder="item.prompt"
                            :data="item.children"
                            :render-after-expand="false"
                            :check-strictly="item.checkStrictly"

                    />
                    <!--文件上传-->
                    <div v-if="item.type === 'uploadFile'" style="width: 250px">
                        <a href="javascript:;" class="file" style="text-align:center">选择文件
                            <input type="file" name="fileData" id="fileData_ipt" ref="fileInputRef" @change="changeFile(item.prop)"   style="opacity: 0;position: absolute;width: 100px;height: 36px;left: 0;cursor: pointer;">
                        </a>
                        <div class="fileLabel">
                            <label :title=fileName style="cursor: pointer" @click="openFile">{{fileName}}</label>
                        </div>
                    </div>

                </el-form-item>
            </template>
        </el-form>
        <div class="base-forms-button">
            <el-button type="primary" @click="confirm(formRef)">确认</el-button>
            <el-button @click="cancel()">取消</el-button>
        </div>
    </div>
</template>

<script setup>
    import {ref} from 'vue'
    import { ElMessage } from 'element-plus'

    const props = defineProps({
        // 表单数据
        formFile: {
            type: Array,
            required: null,
        },
        //表单验证
        rules:{
            type: Object,
            required: null,
        },
        // 表单确认方法
        confirm:{
            type:Function,
            required: null,
        },
        // 表单取消方法
        cancel:{
            type:Function,
            required: null,
        },
        // 表单标签长度
        labelWidth:{
            type:Number,
            required: 80,
        },
        // 行内表单模式
        formsInline:{
            type:Boolean,
            required: true,
        }

    });
    const formRef = ref();
    const formsData = ref({});
    const formsRules = props.rules;
    const fileName = ref('未选择文件'); // 上传文件名称
    const fileInputRef = ref(null);

    // 表单赋值 用于修改页面
    const setFormData =(data) =>{
        formsData.value = data;
    };

    // 点击确认以后 调用父组件的确认方法
    const confirm =(formEl) =>{
        if (!formEl) return;
        formEl.validate((valid, fields) => {
            if (valid) {
                props.confirm(formsData.value);
            } else {
//                ElMessage.warning('请输入未输入的内容!')
            }
        })
    };
    // 取消
    const cancel =() =>{
        props.cancel();
    };

    // 重置该表单项，将其值重置为初始值，并移除校验结果
    const baseResetFields =() =>{
        formRef.value.resetFields();
    };


    // 文件上传
    const changeFile =(name)=>{
        let inputDOM = fileInputRef.value[0];
        let file = inputDOM.files[0];
        fileName.value = file.name;
        formsData.value[name] = file;

    };


    // 将子组件方法暴露给父组件
    defineExpose({
        baseResetFields,
        setFormData,
    })




</script>

<style lang="scss" scoped>
    .form-inline{

    }
    .base-forms-item{
        width: 250px;
    }
    .base-forms-button{
        display: inline-table;
        width: 95%;
        text-align: center;
    }
    .form-inline{
        font-size: 18px;
    }
    .form-inline .el-input{
        width: 250px;
    }
    .form-inline .el-select{
        width: 250px;
    }
    .fileLabel {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
        height: 32px;
        position: relative;
        left: 25%;
        top: -32px;
    }
</style>
